
<!DOCTYPE HTML>
<html>
<head>
<title>建设中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
	background:yellow;
	font-family: 'Patua One', cursive;
}
.wrap{
	margin:0 auto;
}
.logo h1{
	color:black;
	font-weight:bold;
	font-size:27px;
	text-transform:uppercase;
}	
.sub-head{
	text-align:center;
}
.sub-head h2{
	margin-top:150px;
	font-size:40px;
	font-weight:bold;
	color:black;
}
br { clear: both; }
.cntSeparator {
	font-size: 54px;
	margin: 10px 7px;
	color: #000;
}
.main{
	background:white;
	width:550px;
	margin:0 auto;
	padding:45px;
	-webkit-border-radius:.5em;
	-moz-border-radius:.5em;
	border-radius:.5em;
	-webkit-box-shadow:0 0 5px #aaa;
   -moz-box-shadow:0 0 5px #aaa;
	box-shadow:0 0 8px #aaa;
}
#counter{
	margin:0 auto 7px auto;
	width:512px;
}
.desc{
	margin-left:2px;
}
.desc div {
	float: left;
	width: 70px;
	margin:0 46px 0 19px;
	font-size: 13px;
	color: #000000;
}	
.contact{
	width:300px;
	margin:50px auto;
	padding:4px 6px;
	background:black;
	-webkit-border-radius:.3em;
	   -moz-border-radius:.3em;
	        border-radius:.3em;
}
.contact input[type="text"]{
	background:none;
	border:none;
	font-size:15px;
	padding:3px;
	color:#fff;
	width:238px;
}
.contact input[type="submit"]{
	background:yellow;
	border:none;
	padding:5px;
	margin:0;
	cursor:pointer;
	-webkit-border-radius:.2em;
	   -moz-border-radius:.2em;
			border-radius:.2em;
}
.footer{
	position:absolute;
	bottom:10px;
	right:10px;
	font-size:14px;
	color:black;
}
.footer a{
	color:#888;
	text-decoration:none;
}
.error{
	background: rgba(17, 17, 17, 0.63);
	width: 30%;
	margin:  20px auto;
	font-size: .8em;
	padding: 15px;
	border-radius: .4em;
	color:rgb(255, 255, 255);
	position: relative;
	box-shadow: 0 1px 1px rgba(56, 56, 56, 0.12) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
.error:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 8px;
    border-style: none solid solid solid;
    border-color: transparent transparent  rgba(17, 17, 17, 0.63);
    top: -8px;
    right: 5%;
}
@media all and (max-width:640px) and (min-width:480px){
.main {
	width: 84%;
	padding: 30px;
}
.desc div {
	margin: 0 0px 0 19px;
}
.sub-head h2 {
	margin-top:100px;
}
.contact {
	margin: 30px auto;
}
#counter {
	zoom:0.85;
}
}
@media all and (max-width:480px) and (min-width:320px){
.main {
	width: 84%;
	padding: 20px;
}
.desc div {
	margin: 0 0px 0 10px;
}
.contact {
	margin: 30px auto;
}
#counter {
	zoom:0.55;
}
.sub-head h2 {
	margin-top: 80px;
	font-size: 30px;
}
}
@media all and (max-width:320px) and (min-width:240px){
.main {
	width: 84%;
	padding: 10px;
}
.desc div {
	margin: 0 0px 0 -11px;
}
.sub-head h2 {
	margin-top:80px;
	font-size:20px;
}
.contact {
	margin: 30px auto;
}
#counter {
	zoom:0.54;
}
.cntSeparator {
	font-size: 13px;
	margin:0px;
}
.contact{
	width:265px;
}
.contact input[type="text"] {
	width:200px;
}
} 
@media all and (max-width:240px){
.main {
	width: 84%;
	padding: 10px;
}
.desc div {
	margin: 0 0px 0 -11px;
}
.sub-head h2 {
	margin-top:40px;
	font-size:17px;
}
.contact {
	margin: 20px auto;
}
#counter {
	zoom:0.4;
}
.cntSeparator {
	font-size: 13px;
	margin:0px;
}
.contact{
	width:185px;
}
.contact input[type="text"] {
	width:122px;
	font-size:13px;
}
.logo h1{
	font-size:20px;
}
} 
</style>
</head>
<body>
	<div class="header">
			<div class="logo">
				<h1>Qing</h1>
			</div>
	</div>	
 <div class="wrap">	 
    <div class="sub-head">	
        <h2>网站建设中</h2>
	</div>
     <div class="main">
	   <div id="counter"></div>
		   <div class="desc">
				<div>22Days</div>
				<div>Hours</div>
				<div>Minutes</div>
				<div>Seconds</div>
			</div>
        </div>
   </div>	
<div class="contact">
	<form method="post" id="register" action="#">
		<input type="text" class="textbox" id="UserEmail" name="userEmail" value="Email:1310811431@qq.com" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
        <input type="submit" value="Submit" class="but" id="btn-submit" />
	</form></div><div id="UserEmailmsg"></div>
		 <div class="footer">
		    建设者 - <a href="${base.contextPath}">Gsonqing</a>
		 </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/JavaScript">

$(document).ready(function() { 
		
		$('#btn-submit').click(function() {  
				
				$(".error").hide();
				var hasError = false;
				var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
				var emailaddressVal = $("#UserEmail").val();
				if(emailaddressVal == '') {
					$("#UserEmailmsg").after('<div class="error">Please enter your email address.</div>');
					hasError = true;
				} else if(!emailReg.test(emailaddressVal)) {	
					$("#UserEmailmsg").after('<div class="error">Enter a valid email address.</div>');
					hasError = true;
				} else if(!emailblockReg.test(emailaddressVal)) {	
					$("#UserEmailmsg").after('<div class="error">No gmail, hotmail or yahoo.</div>');
					hasError = true;
				} 
		
				if(hasError == true) { return false; }
				else {
					$("#UserEmailmsg").after('<div class="error">Email accepted.</div>');
					return false;
				}
	});	
});
</script>
<script src="${base.contextPath}/static/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'images/digits.png',
          startTime: '66:66:66:66'
        });
      });
    </script>
</body>
</html>